import { Layout, Breadcrumb, Typography, Space } from 'antd';
import Menu from './components/Menu';
import Nav from './components/Nav';
import { IRouteComponentProps } from 'umi';

import { useState } from 'react';

import './index.less';

const { Header, Content, Footer, Sider } = Layout;

const SiderDemo = (props: IRouteComponentProps) => {
  const [collapsed, set_collapsed] = useState<boolean>(false);
  const onCollapse = (collapsed: boolean) => {
    set_collapsed(collapsed);
  };
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="logo" />
        <Menu />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background headerbg"
          style={{ padding: '0 20px', textAlign: 'right' }}
        >
          <Space size="middle">
            <Typography.Text>欢迎你， xxx</Typography.Text>
            <Typography.Link>退出</Typography.Link>
          </Space>
        </Header>
        <Nav />

        <Content style={{ margin: '0 16px' }}>
          <div
            className="site-layout-background"
            style={{ margin: '24px 0', padding: 24, minHeight: 360 }}
          >
            {props.children}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default SiderDemo;
